<!-- 积分明细 -->
<template>
	<view class="integralDetail">
		<view class="contribution-value">
			<view class="label">余额：</view>
			<view class="flex">
				<text>{{yue}}</text>
				<image class="label-image" src="/static/images/icon_coin.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="selectbox flex space-between">
			<view class="label">明细记录</view>
			<!-- <view class="dateselectbox">
      <uni-data-select v-model="datevalue" :localdata="dates" @change="datechange"></uni-data-select>
      <view class="icon">
        <image src="/static/images/home/icon_select.png"></image>
      </view>
    </view> -->
		</view>

		<view class="orderbox">
			<view v-show="goodslist.length>0" v-for="(item, index) in goodslist" :key="index" @click="goodsClick(item)">
				<view class="order flex">
					<image class="image" mode="scaleToFill" :src="mediaUrl+item.img"></image>
					<view class="product-info">
						<view class="titles">{{item.goodname}}</view>
						<view class="tips">{{item.date}}</view>
					</view>
					<view class="product-value">
						<view class="type">{{item.descs}}</view>
						<view class="flex">
							<text v-if="item.descs.includes('购买')">-1</text>
							<text v-if="item.descs.includes('售出')">+1</text>
							<text v-if="item.descs.includes('举报商品')">+1</text>
							<image class="label-image" src="/static/images/icon_coin.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	export default {
		name: "integralDetail",
		data() {
			return {
				dates: [{
					value: 1,
					text: '2024-05-21'
				}, {
					value: 2,
					text: '2024-05-20'
				}],
				goodslist: [],
				yue: 0,
				type: 1,
				userid: '',
				mediaUrl: uni.$http.mediaUrl,
				goodsbg: '/media/image/null.png',

				datevalue: 2,
				imageUrl: uni.$http.mediaUrl + '/media/picture/RyQti2KCqityd98b851ed6081debb1d0d9939e1f5d08.jpg'

			}
		},
		onShow() {
			this.userid = uni.getStorageSync('userid')

			self = this
			self.goodslist = [];
			this.mingxi()

		},
		methods: {
			datechange(e) {
				this.datevalue = e
			},
			goodsClick(item) {
			  if (uni.getStorageSync('hasLogin')) {
			    uni.navigateTo({
			      url: '/pages/home/goodsdetail?goodsid=' + item.goodsid
			    })
			  } else {
			    uni.showToast({
			      icon: 'none',
			      title: '登陆后可体验更多功能~',
			      duration: 2000
			    })
			    setTimeout(() => {
			      this.showlogin = true
			    }, 1000);
			  }

			},
			async mingxi() {
				const postmsg = {
					userid: this.userid,
				}
				// console.log(postmsg)

				const {
					data: res
				} = await uni.$http.post('jifenmingxi/', postmsg)
				if (res.code == 200) {
						self.yue=res.yue
						if (res.data.length > 0) {

							var dest = [];
							for (let i = 0; i < res.data.length; i++) {

								var obj = {}
								obj.id = res.data[i].id;
								obj.goodsid = res.data[i].goodsid
								obj.goodname = res.data[i].goodname
								obj.img = JSON.parse(res.data[i].img)[0];
								obj.descs = res.data[i].descs
								obj.date = res.data[i].date_joined
								obj.much = res.data[i].much;
								self.goodslist.push(obj)
							}
							// self.goodslist = self.goodslist.concat(goodslist1)

						}


				} else {
					// uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '系统繁忙中，请稍后再试...',
						duration: 1000
					})
				}
			},


		},


	}
</script>

<style lang="scss">
	.integralDetail {
		padding: 30rpx 40rpx;

		.label-image {
			width: 38rpx;
			height: 38rpx;
			margin-left: 10rpx;
		}
	}

	.contribution-value {
		border-bottom: 1px solid rgb(239, 239, 239);
		padding-bottom: 30rpx;

		.label {
			font-size: 28rpx;
			color: #262626;
		}

		.flex text {
			font-size: 64rpx;
			font-weight: bold;
		}
	}

	.selectbox {
		margin-top: 20rpx;

		.label {
			color: #8E8E8E;
			font-size: 28rpx;
		}
	}

	.dateselectbox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		position: relative;

		.icon {
			position: absolute;
			right: 40rpx;
			bottom: 18rpx;

			image {
				width: 18rpx;
				height: 18rpx;
			}
		}

		uni-data-select {
			width: 320rpx;
			color: #000;

			.uni-select {
				border-radius: 40rpx;
				border: 1px solid #BEBEBE;
				height: 72rpx;

				.uni-select__input-box {
					height: 72rpx;
				}

				.uni-select__selector {
					width: 320rpx;
					position: absolute;
					top: calc(100% + 10rpx);
					left: 0rpx;
					color: #8E8E8E;
					padding: 0 20rpx;

					.uni-popper__arrow {
						left: 75%
					}

					.uni-select__selector-item {
						text-align: center;
						border-bottom: 1rpx solid #8E8E8E;

						text {
							width: 90%;
						}

						&:last-child {
							border-bottom: none;
						}
					}
				}
			}

			.uni-select__input-text {
				color: #8E8E8E;
				transform: translateX(-20rpx);
				font-size: 28rpx;
			}

			.uni-icons {
				display: none;
			}
		}
	}

	.orderbox {
		.order {
			box-sizing: border-box;
			border: 1px solid rgb(190, 190, 190);
			border-radius: 12rpx;
			color: #A99CE6;
			padding: 20rpx;
			margin-top: 20rpx;
			position: relative;

			.image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 24rpx;
			}

			.product-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;

				.titles {
					color: #8678CB;
					font-size: 28rpx;
					line-height: 2;
				}

				.taglist {
					display: flex;

					.tag {
						border-radius: 14rpx;
						background: rgb(247, 242, 255);
						padding: 6rpx 10rpx;
						color: #8978CB;
						font-size: 18rpx;
						margin-right: 10rpx;
					}
				}

				.tips {
					font-size: 22rpx;
					line-height: 2;
				}

				.distance {
					font-size: 24rpx;
					color: #A99CE6;

					.icon-location {
						width: 18rpx;
						height: 21rpx;
						margin-right: 5rpx;
					}
				}
			}

			.product-value {
				font-size: 24rpx;
				position: absolute;
				right: 0;
				top: 0;

				.flex {
					justify-content: flex-end;
					margin-right: 20rpx;
				}

				&.green {
					.type {
						background-color: #7FD0AB;
					}

					text {
						color: #449F64
					}
				}

				.type {
					padding: 10rpx 30rpx 10rpx 40rpx;
					background-color: #C5B7F2;
					color: #fff;
					border-radius: 0 12rpx 0 44rpx;
				}

				>view {
					margin-bottom: 20rpx;

					text {
						color: #E36060;
						font-size: 36rpx;
						padding: 0 5rpx;
					}
				}
			}
		}
	}
</style>
